<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 
			 浮动：
			 为什么要进行浮动：页面横向布局
			 float:  left   right
			 浮动塌陷的问题：
			 父级元素在没有设置高度的情况下，子元素浮动会造成浮动塌陷（父元素后面的元素会显示到浮动的元素下面）
			 解决方案1、：给父元素设置：overflow: hidden;
			 解决方案2:  在父元素中，最后一个浮动元素后面添加一个块元素（div）,给这个元素设置clear:both

			 */
			
			.box1,
			.box2,
			.box3 {
				height: 200px;
				width: 200px;
				float: left;
				margin-left: 20px;

			}

			.box1 {
				background: #00FFFF;
			}

			.box2 {
				background: yellow;
				float: right;
			}

			.box3 {
				background: red;
			}
			
			#app{
				 /*height: 900px;*/
				/* 缺陷：父元素中子元素内容量不确定的情况，此方案会有bug */
				/* overflow: hidden;*/
			
			}
			.content{
				height: 300px;
				background: #000;

			}
			.clear{
				clear: both;
			}
		</style>


	</head>
	<body>

		<div id="app">
			<div class="box1">
				1111
			</div>
			<div class="box2">
				222
			</div>
			<div class="box3">
				3333
			</div>
			<div class="box1">
				3333
			</div>
			<div class="box2">
				3333
			</div>
			<div class="clear"></div>
		
		</div>

		
		
		<div class="content">
			python8888
			
		</div>


	</body>
</html>
